<template>
  <div class="GroupDetail">
    <div class="GroupDetail_head">
      <van-icon name="arrow-left" @click="back" />
      <h3>团购详情</h3>
      <p>
        <van-icon name="ellipsis" />
        <van-icon name="award-o" />
      </p>
    </div>

    <div class="GroupDetail_main">
      <div class="GroupDetail_one">
        <dl>
          <dt><img :src="detail.img" alt="" /></dt>
          <dd>
            <p>{{ detail.name }}</p>
            <p>{{ detail.address }}</p>
            <p>
              <span>活动时间：{{ detail.time }}</span>
              <span>已报名：{{ detail.peopleNum }}人</span>
            </p>
          </dd>
        </dl>
      </div>

      <h4>团购介绍</h4>

      <div class="GroupDetail_main_two">
        {{ detail.teamcontext }}
      </div>

      <van-swipe-cell>
        <div class="GroupDetail_main_three">
          <dl>
            <dt><img :src="detail.userImg" alt="" /></dt>
            <dd>
              <p>{{ detail.title }}</p>
              <p>{{ detail.phone }}</p>
            </dd>
          </dl>
        </div>
        <template #right>
          <van-button square type="danger" text="删除" />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail: [],
    };
  },

  methods: {
    groupdetail() {
      console.log(JSON.parse(this.$route.query.item));
      this.detail = JSON.parse(this.$route.query.item);
    },
    back() {
      history.go(-1);
    },
  },
  created() {
    this.groupdetail();
  },
};
</script>

<style>
.GroupDetail {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
.GroupDetail_head {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  background: #2693fa;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 999;
}
.GroupDetail_head p {
  border: 1px solid #e6e6e6;
  border-radius: 40px;
}
.GroupDetail_head p .van-icon {
  padding: 4px 10px;
}
.GroupDetail_main {
  flex: 1;
  overflow-y: scroll;
}
.GroupDetail_one dl {
  width: 93%;
  height: 350px;
  margin: 0 auto;
}
.GroupDetail_one dl dt {
  width: 100%;
  height: 250px;
}
.GroupDetail_one dl dt img {
  width: 100%;
  height: 100%;
}
.GroupDetail_one dl dd p {
  margin: 10px 0;
}
.GroupDetail_one dl dd p:nth-child(3) {
  display: flex;
  justify-content: space-between;
}
h4 {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.GroupDetail_main_two {
  width: 100%;
  padding: 0 10px;
  color: #ccc;
}
.GroupDetail_main_three {
  width: 100%;
}
.GroupDetail_main_three dl {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.GroupDetail_main_three dl dt {
  width: 15%;
  height: 60%;
}
.GroupDetail_main_three dl dt img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #e6e6e6;
  box-shadow: 1px 1px 5px 1px turquoise;
}
.GroupDetail_main_three dl dd {
  padding-left: 10px;
}
.GroupDetail_main_three dl dd p {
  margin: 8px 0;
}
</style>